<script setup>
import { ref, onMounted, computed } from "vue";
import httpInstance from "@/utils/http";
import { userStore } from "@/stores/userStore";
import { formatDate } from "@/utils/dateUtil";
import { useRouter } from "vue-router";
import { interceptor } from "@/utils/interceptor";

const router = useRouter();
const startDate = ref("");
const endDate = ref("");
//const userStore = userStore();
const exams = ref([]);
const input = ref(""); // 绑定输入框的值
const state = ref("");
const userUserStore = userStore();

// 使用 computed 实时获取 input 的值
const computedInput = computed(() => {
  return input.value.trim(); // 去掉首尾空格
});

const computedState = computed(() => {
  return state.value;
});

const computedStart = computed(() => {
  return startDate.value;
});

const computedEnd = computed(() => {
  return endDate.value;
});

// 过滤考试
const filteredExams = computed(() => {
  return exams.value.filter((exam) => {
    // 检查考试名称是否匹配
    const nameMatch = exam.name.toLowerCase().includes(computedInput.value.toLowerCase());

    // 检查状态是否匹配
    const stateMatch = exam.examState.toLowerCase().includes(computedState.value.toLowerCase());

    // 检查日期范围是否匹配
    const userStartDate = computedStart.value ? new Date(computedStart.value) : null;
    const userEndDate = computedEnd.value ? new Date(computedEnd.value) : null;

    const examStartDate = new Date(exam.startTime);
    const examEndDate = new Date(exam.endTime);

    const dateMatch =
      (!userStartDate || examEndDate >= userStartDate) &&
      (!userEndDate || examStartDate <= userEndDate);

    // 返回所有条件都匹配的结果
    return nameMatch && stateMatch && dateMatch;
  });
});

onMounted(() => {
  (async () => {
    try {
      const httpInstance = interceptor();
      const res = await httpInstance.post("/student/exam", {
        id: userUserStore.id,
      });
      console.log(res.data.data);
      for (let i = 0; i < res.data.data.length; i++) {
        console.log(res.data.data[i].startTime, formatDate(res.data.data[i].startTime));
        exams.value.push({
          id: res.data.data[i].examId,
          courseId: res.data.data[i].courseId,
          name: res.data.data[i].examName,
          duration: res.data.data[i].duration,
          startTime: formatDate(res.data.data[i].startTime),
          endTime: formatDate(res.data.data[i].endTime),
          finalScore: res.data.data[i].finalScore,
          remark: res.data.data[i].remark,
          state:
            res.data.data[i].state === 1
              ? "待开展"
              : res.data.data[i].state === 2
              ? "进行中"
              : "已结束",
          examState:
            res.data.data[i].examState === 0
              ? "待完成"
              : res.data.data[i].examState === 1
              ? "已完成"
              : "错过考试",
        });
      }
    } catch (error) {
      console.error("请求失败:", error);
    }
  })();
});

// 跳转到考试详情页面
const goToExam = (examId) => {
  router.push({
    name: "studentExamDetail",
    params: { examId },
  });
};
</script>

<template>
  <div class="input">
    <span class="title">考试名称</span>
    <input type="content" placeholder="请输入" v-model="input" />

    <span class="title">状态</span>
    <select v-model="state">
      <option>待完成</option>
      <option>已完成</option>
      <option>错过考试</option>
    </select>
    <span class="title">从</span>
    <input type="date" v-model="startDate" />
    <span class="title">至</span>
    <input type="date" v-model="endDate" />
  </div>

  <div v-if="filteredExams && filteredExams.length > 0" class="form">
    <div v-for="exam in filteredExams" :key="exam.id" class="exam">
      <div class="exam-left">
        <span class="title">{{ exam.name }}</span>
        <span class="time">
          考试开始时间: {{ exam.startTime }} 考试结束时间: {{ exam.endTime }} 时限:
          {{ exam.duration }}分钟
        </span>
        <span class="remark">
          考试注意点:
          <ol>
            <li>本次考试为线上闭卷考试</li>
            <li>首次进入考试将倒计时，倒计时截止自动提交！</li>
            <li>考试发布一周内可参加答卷</li>
          </ol>
        </span>
        <div class="remarkDetail">详细考试须知</div>
      </div>
      <div
        :class="[
          'exam-right',
          {
            disabled: exam.examState === '错过考试',
            pending: exam.examState === '待完成',
            completed: exam.examState === '已完成',
          },
        ]"
        @click="goToExam(exam.id, exam.state)"
      >
        {{
          exam.examState === "待完成"
            ? "待完成"
            : exam.examState === "已完成"
            ? "已完成"
            : "错过考试"
        }}
      </div>
    </div>
  </div>
  <div v-else class="noData">
    <img src="@/assets/img/noDataView.png" alt="No Data Found"/>
  </div>
</template>

<style scoped lang="scss">
.input {
  display: flex;
  margin-left: 6%;
  margin-top: 4%;
  flex-direction: row;

  .title {
    font-size: 190%;
    margin-right: 2%;
  }
  input {
    font-size: 150%;
    margin-right: 5%;
  }
  select {
    width: 15%;
    margin-right: 2%;
    font-size: 150%;
    color: rgb(145, 145, 145);
    option {
      font-size: 100%;
    }
  }
}
.form {
  width: 100vw;
  height: auto;
  background-color: rgb(255, 255, 255);
  margin-top: 1%;

  .exam {
    width: 80%;
    height: 20vh;
    background-color: rgb(158, 233, 236);
    margin-left: 6%;
    margin-right: 5%;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);

    .exam-left {
      width: 100%;
      display: flex;
      flex-direction: column;
      .title {
        margin-left: 3%;
        margin-top: 1%;
        font-size: 150%;
      }
      .time {
        margin-left: 3%;
      }
      .remark {
        margin-top: 1%;
        margin-left: 3%;
      }
      .remarkDetail {
        width: 15%;
        margin-left: 3%;
        color: rgb(82, 190, 223);
        cursor: pointer; /* 鼠标悬停时显示手型 */
        &:hover {
          color: black;
        }
      }
    }
    .exam-right {
      display: flex;
      width: 15%;
      background-color: rgb(202, 202, 222);
      align-items: center;
      justify-content: center;
      font-size: 200%;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: white;
        background-color: rgba(176, 170, 170, 0.2); /* 鼠标悬停时的背景效果 */
      }

      &.disabled {
        background-color: gray; /* 已结束状态的背景颜色 */
        color: white;

        cursor: not-allowed; // 鼠标悬停时显示禁止状态
        pointer-events: none; // 禁止点击
      }
      &.pending {
        background-color: #eaee6c; /* 黄色背景表示待完成 */
        color: #000;
      }

      &.completed {
        background-color: #51db74; /* 绿色背景表示已完成 */
        pointer-events: none; // 禁止点击

        color: #fff;
      }
    }
  }
}

.noData{
max-width: 100%;
height: auto;
margin-left: 18%;
}
</style>
